<template>
  <Submenu :name="parentId">
    <template slot="title">
      <Icon v-if="menuItem.icon" :type="menuItem.icon"></Icon>
      <span class="menu-item-title">{{menuItem.name}}</span>
    </template>
    <div v-for="(obj,idx) in menuItem.children" :key="idx">
      <MenuItem v-if="obj.children.length === 0" :name="parentId+'-'+idx" :to="obj.path">{{obj.name}}</MenuItem>
      <menu-tree v-else :menuItem="obj" :parentId="parentId+'-'+idx"></menu-tree>
    </div>
  </Submenu>
</template>

<script>
  export default {
    name: 'menuTree',
    props: {
      menuItem: Object,
      parentId: String
    },
    data () {
      return {

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
